<template>
  <div class="container">
    <!-- 导航区域 -->
    <!-- <van-nav-bar title="首页" class="page-nav-bar" /> -->
    <!-- 搜索框 -->
    <van-search
      class="search"
      disabled
      shape="round"
      background="#3296fa"
      placeholder="请输入搜索关键词"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3296fa">
      <van-swipe-item v-for="item in homeData.bannerList" :key="item.id">
        <img :src="item.image_url" class="swiper_img" />
      </van-swipe-item>
    </van-swipe>
    <!-- 快捷通道 -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="item1 in homeData.channelList"
        :key="item1.id"
        :icon="item1.icon_url"
        :text="item1.name"
      />
    </van-grid>
    <!-- 品牌制造商直供 -->
    <div class="maker content_box">
      <div class="title">
        <span>品牌制造商直供</span>
      </div>
      <div class="maker_box all_box">
        <div
          class="item2_box box_item"
          v-for="item2 in homeData.brandList"
          :key="item2.id"
        >
          <div class="item2_img item_img">
            <img :src="item2.pic_url" alt="" />
          </div>
          <div class="item2_cont item_cont">
            <p>{{ item2.name }}</p>
            <p v-if="item2.floor_price">￥{{ item2.floor_price.toFixed(2) }}</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 新品首发 -->
    <div class="nProducts content_box">
      <div class="title">
        <span>周一周四·新品首发</span>
      </div>
      <div class="nProducts_box all_box">
        <div
          class="box_item"
          v-for="item3 in homeData.newGoodsList"
          :key="item3.id"
        >
          <div class="item_img">
            <img :src="item3.list_pic_url" alt="" />
          </div>
          <div class="item3_cont item_cont">
            <p>{{ item3.name }}</p>
            <p v-if="item3.retail_price">
              ￥{{ item3.retail_price.toFixed(2) }}
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 人气推荐 -->
    <div class="hotgoods content_box">
      <div class="title">
        <span>人气推荐</span>
      </div>
      <div class="hot_box">
        <div
          class="box-item4"
          v-for="item4 in homeData.hotGoodsList"
          :key="item4.id"
        >
          <div class="item4_left">
            <img :src="item4.list_pic_url" alt="" />
          </div>
          <div class="item4_right">
            <div class="title">{{ item4.name }}</div>
            <div class="detail">{{ item4.goods_brief }}</div>
            <div class="price price_color">
              ￥{{ item4.retail_price.toFixed(2) }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 专题精选 -->
    <div class="nProducts content_box">
      <div class="title">
        <span>专题精选</span>
      </div>
      <div class="nProducts_box all_box">
        <div
          class="box_item"
          v-for="item5 in homeData.topicList"
          :key="item5.id"
        >
          <div class="item_img">
            <img :src="item5.list_pic_url" alt="" />
          </div>
          <div class="item3_cont item_cont">
            <p>{{ item5.name }}</p>
            <p v-if="item5.retail_price">
              ￥{{ item5.retail_price.toFixed(2) }}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getHomeInfo } from "../../api/home";
import { toast } from "../../utils/vanToast";
import { toRefs, reactive } from "vue";
import { onMounted } from "vue";
const homeData = reactive({
  bannerList: [],
  channelList: [],
  brandList: [],
  newGoodsList: [],
  hotGoodsList: [],
  topicList: [],
});

// let bannerList = ref([]);
// getHomeInfo()
//   .then((res) => {
//     console.log(res.data.data);
//     let { banner } = res.data.data;
//     bannerList.value = banner;
//   })
//   .catch((err) => {
//     toast("请求失败", "fail");
//     console.log(err);
//   });
onMounted(async () => {
  toast("加载中...", "loading");
  const { data } = await getHomeInfo();
  if (data.errno != 0) {
    return toast("加载失败", "fail");
  }
  toast("加载成功");
  console.log(data.data);
  homeData.bannerList = data.data.banner;
  homeData.channelList = data.data.channel;
  homeData.brandList = data.data.brandList;
  homeData.newGoodsList = data.data.newGoodsList;
  homeData.hotGoodsList = data.data.hotGoodsList;
  homeData.topicList = data.data.topicList;
});
</script>

<style lang="less" scoped>
.price_color {
  color: red;
}
// .search {
//   margin-top: 1.22667rem;
// }
.swiper_img {
  width: 100%;
  height: 100%;
}
.content_box {
  margin-top: 16px;
  padding: 8px;
  border-top: 1px solid #dbdbdb;
  .title {
    text-align: center;
    font-size: 20px;
  }
  .all_box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    .box_item {
      width: 49%;
      font-size: 14px;
      box-sizing: border-box;
      .item_img {
        img {
          width: 100%;
          height: 100%;
        }
      }
      .item_cont {
        p:nth-child(2) {
          color: red;
        }
      }
      .item3_cont {
        text-align: center;
      }
    }
  }
}
.item2_box {
  position: relative;
  .item2_cont {
    position: absolute;
    top: 10px;
    left: 10px;
  }
}
.box-item4 {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 8px;
  background-color: #fafafa;
  padding: 6px;
  .item4_left {
    width: 88px;
    height: 88px;
    img {
      width: 100px;
      height: 100%;
    }
  }
  .item4_right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 14px;
    margin-left: 12px;
  }
  .title {
    font-size: 16px;
  }
}
.box-item4:first-child {
  margin-top: 12px;
}
</style>
